<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .top {
         position: fixed;
         bottom: 10px;
         right: 10px;
         width: 100px;
         height: 100px;
         background-color: red;
      }
   </style>
</head>

<body>
   <div id="app">
      <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>7</li>
         <li>8</li>
         <li>9</li>
         <li>10</li>
         <li>11</li>
         <li>12</li>
         <li>13</li>
         <li>14</li>
         <li>15</li>
         <li>16</li>
         <li>17</li>
         <li>18</li>
         <li>19</li>
         <li>20</li>
         <li>21</li>
         <li>22</li>
         <li>23</li>
         <li>24</li>
         <li>25</li>
         <li>26</li>
         <li>27</li>
         <li>28</li>
         <li>29</li>
         <li>30</li>
         <li>31</li>
         <li>32</li>
         <li>33</li>
         <li>34</li>
         <li>35</li>
         <li>36</li>
         <li>37</li>
         <li>38</li>
         <li>39</li>
         <li>40</li>
         <li>41</li>
         <li>42</li>
         <li>43</li>
         <li>44</li>
         <li>45</li>
         <li>46</li>
         <li>47</li>
         <li>48</li>
         <li>49</li>
         <li>50</li>
         <li>51</li>
         <li>52</li>
         <li>53</li>
         <li>54</li>
         <li>55</li>
         <li>56</li>
         <li>57</li>
         <li>58</li>
         <li>59</li>
         <li>60</li>
         <li>61</li>
         <li>62</li>
         <li>63</li>
         <li>64</li>
         <li>65</li>
         <li>66</li>
         <li>67</li>
         <li>68</li>
         <li>69</li>
         <li>70</li>
         <li>71</li>
         <li>72</li>
         <li>73</li>
         <li>74</li>
         <li>75</li>
         <li>76</li>
         <li>77</li>
         <li>78</li>
         <li>79</li>
         <li>80</li>
         <li>81</li>
         <li>82</li>
         <li>83</li>
         <li>84</li>
         <li>85</li>
         <li>86</li>
         <li>87</li>
         <li>88</li>
         <li>89</li>
         <li>90</li>
         <li>91</li>
         <li>92</li>
         <li>93</li>
         <li>94</li>
         <li>95</li>
         <li>96</li>
         <li>97</li>
         <li>98</li>
         <li>99</li>
         <li>100</li>
         <li>101</li>
         <li>102</li>
         <li>103</li>
         <li>104</li>
         <li>105</li>
         <li>106</li>
         <li>107</li>
         <li>108</li>
         <li>109</li>
         <li>110</li>
         <li>111</li>
         <li>112</li>
         <li>113</li>
         <li>114</li>
         <li>115</li>
         <li>116</li>
         <li>117</li>
         <li>118</li>
         <li>119</li>
         <li>120</li>
         <li>121</li>
         <li>122</li>
         <li>123</li>
         <li>124</li>
         <li>125</li>
         <li>126</li>
         <li>127</li>
         <li>128</li>
         <li>129</li>
         <li>130</li>
         <li>131</li>
         <li>132</li>
         <li>133</li>
         <li>134</li>
         <li>135</li>
         <li>136</li>
         <li>137</li>
         <li>138</li>
         <li>139</li>
         <li>140</li>
         <li>141</li>
         <li>142</li>
         <li>143</li>
         <li>144</li>
         <li>145</li>
         <li>146</li>
         <li>147</li>
         <li>148</li>
         <li>149</li>
         <li>150</li>
         <li>151</li>
         <li>152</li>
         <li>153</li>
         <li>154</li>
         <li>155</li>
         <li>156</li>
         <li>157</li>
         <li>158</li>
         <li>159</li>
         <li>160</li>
         <li>161</li>
         <li>162</li>
         <li>163</li>
         <li>164</li>
         <li>165</li>
         <li>166</li>
         <li>167</li>
         <li>168</li>
         <li>169</li>
         <li>170</li>
         <li>171</li>
         <li>172</li>
         <li>173</li>
         <li>174</li>
         <li>175</li>
         <li>176</li>
         <li>177</li>
         <li>178</li>
         <li>179</li>
         <li>180</li>
         <li>181</li>
         <li>182</li>
         <li>183</li>
         <li>184</li>
         <li>185</li>
         <li>186</li>
         <li>187</li>
         <li>188</li>
         <li>189</li>
         <li>190</li>
         <li>191</li>
         <li>192</li>
         <li>193</li>
         <li>194</li>
         <li>195</li>
         <li>196</li>
         <li>197</li>
         <li>198</li>
         <li>199</li>
         <li>200</li>
         <li>201</li>
         <li>202</li>
         <li>203</li>
         <li>204</li>
         <li>205</li>
         <li>206</li>
         <li>207</li>
         <li>208</li>
         <li>209</li>
         <li>210</li>
         <li>211</li>
         <li>212</li>
         <li>213</li>
         <li>214</li>
         <li>215</li>
         <li>216</li>
         <li>217</li>
         <li>218</li>
         <li>219</li>
         <li>220</li>
         <li>221</li>
         <li>222</li>
         <li>223</li>
         <li>224</li>
         <li>225</li>
         <li>226</li>
         <li>227</li>
         <li>228</li>
         <li>229</li>
         <li>230</li>
         <li>231</li>
         <li>232</li>
         <li>233</li>
         <li>234</li>
         <li>235</li>
         <li>236</li>
         <li>237</li>
         <li>238</li>
         <li>239</li>
         <li>240</li>
         <li>241</li>
         <li>242</li>
         <li>243</li>
         <li>244</li>
         <li>245</li>
         <li>246</li>
         <li>247</li>
         <li>248</li>
         <li>249</li>
         <li>250</li>
         <li>251</li>
         <li>252</li>
         <li>253</li>
         <li>254</li>
         <li>255</li>
         <li>256</li>
         <li>257</li>
         <li>258</li>
         <li>259</li>
         <li>260</li>
         <li>261</li>
         <li>262</li>
         <li>263</li>
         <li>264</li>
         <li>265</li>
         <li>266</li>
         <li>267</li>
         <li>268</li>
         <li>269</li>
         <li>270</li>
         <li>271</li>
         <li>272</li>
         <li>273</li>
         <li>274</li>
         <li>275</li>
         <li>276</li>
         <li>277</li>
         <li>278</li>
         <li>279</li>
         <li>280</li>
         <li>281</li>
         <li>282</li>
         <li>283</li>
         <li>284</li>
         <li>285</li>
         <li>286</li>
         <li>287</li>
         <li>288</li>
         <li>289</li>
         <li>290</li>
         <li>291</li>
         <li>292</li>
         <li>293</li>
         <li>294</li>
         <li>295</li>
         <li>296</li>
         <li>297</li>
         <li>298</li>
         <li>299</li>
         <li>300</li>
         <li>301</li>
         <li>302</li>
         <li>303</li>
         <li>304</li>
         <li>305</li>
         <li>306</li>
         <li>307</li>
         <li>308</li>
         <li>309</li>
         <li>310</li>
         <li>311</li>
         <li>312</li>
         <li>313</li>
         <li>314</li>
         <li>315</li>
         <li>316</li>
         <li>317</li>
         <li>318</li>
         <li>319</li>
         <li>320</li>
         <li>321</li>
         <li>322</li>
         <li>323</li>
         <li>324</li>
         <li>325</li>
         <li>326</li>
         <li>327</li>
         <li>328</li>
         <li>329</li>
         <li>330</li>
         <li>331</li>
         <li>332</li>
         <li>333</li>
         <li>334</li>
         <li>335</li>
         <li>336</li>
         <li>337</li>
         <li>338</li>
         <li>339</li>
         <li>340</li>
         <li>341</li>
         <li>342</li>
         <li>343</li>
         <li>344</li>
         <li>345</li>
         <li>346</li>
         <li>347</li>
         <li>348</li>
         <li>349</li>
         <li>350</li>
         <li>351</li>
         <li>352</li>
         <li>353</li>
         <li>354</li>
         <li>355</li>
         <li>356</li>
         <li>357</li>
         <li>358</li>
         <li>359</li>
         <li>360</li>
         <li>361</li>
         <li>362</li>
         <li>363</li>
         <li>364</li>
         <li>365</li>
         <li>366</li>
         <li>367</li>
         <li>368</li>
         <li>369</li>
         <li>370</li>
         <li>371</li>
         <li>372</li>
         <li>373</li>
         <li>374</li>
         <li>375</li>
         <li>376</li>
         <li>377</li>
         <li>378</li>
         <li>379</li>
         <li>380</li>
         <li>381</li>
         <li>382</li>
         <li>383</li>
         <li>384</li>
         <li>385</li>
         <li>386</li>
         <li>387</li>
         <li>388</li>
         <li>389</li>
         <li>390</li>
         <li>391</li>
         <li>392</li>
         <li>393</li>
         <li>394</li>
         <li>395</li>
         <li>396</li>
         <li>397</li>
         <li>398</li>
         <li>399</li>
         <li>400</li>
         <li>401</li>
         <li>402</li>
         <li>403</li>
         <li>404</li>
         <li>405</li>
         <li>406</li>
         <li>407</li>
         <li>408</li>
         <li>409</li>
         <li>410</li>
         <li>411</li>
         <li>412</li>
         <li>413</li>
         <li>414</li>
         <li>415</li>
         <li>416</li>
         <li>417</li>
         <li>418</li>
         <li>419</li>
         <li>420</li>
         <li>421</li>
         <li>422</li>
         <li>423</li>
         <li>424</li>
         <li>425</li>
         <li>426</li>
         <li>427</li>
         <li>428</li>
         <li>429</li>
         <li>430</li>
         <li>431</li>
         <li>432</li>
         <li>433</li>
         <li>434</li>
         <li>435</li>
         <li>436</li>
         <li>437</li>
         <li>438</li>
         <li>439</li>
         <li>440</li>
         <li>441</li>
         <li>442</li>
         <li>443</li>
         <li>444</li>
         <li>445</li>
         <li>446</li>
         <li>447</li>
         <li>448</li>
         <li>449</li>
         <li>450</li>
         <li>451</li>
         <li>452</li>
         <li>453</li>
         <li>454</li>
         <li>455</li>
         <li>456</li>
         <li>457</li>
         <li>458</li>
         <li>459</li>
         <li>460</li>
         <li>461</li>
         <li>462</li>
         <li>463</li>
         <li>464</li>
         <li>465</li>
         <li>466</li>
         <li>467</li>
         <li>468</li>
         <li>469</li>
         <li>470</li>
         <li>471</li>
         <li>472</li>
         <li>473</li>
         <li>474</li>
         <li>475</li>
         <li>476</li>
         <li>477</li>
         <li>478</li>
         <li>479</li>
         <li>480</li>
         <li>481</li>
         <li>482</li>
         <li>483</li>
         <li>484</li>
         <li>485</li>
         <li>486</li>
         <li>487</li>
         <li>488</li>
         <li>489</li>
         <li>490</li>
         <li>491</li>
         <li>492</li>
         <li>493</li>
         <li>494</li>
         <li>495</li>
         <li>496</li>
         <li>497</li>
         <li>498</li>
         <li>499</li>
         <li>500</li>

      </ul>

      <!--! v-pagetop: 使用自定义指令 -->
      <div class="top" v-pagetop>
         回到顶部
      </div>
   </div>
</body>

</html>
<script src="./lib/vue.js"></script>
<script>
   const vm = new Vue({
      el: '#app',
      data: {

      },
      // 局部自定义指令 -- 简写
      directives: {
         "pagetop": function (el, binding) {
            // console.log(el);
            el.onclick = function () {
               document.body.scrollTop = 0;
               document.documentElement.scrollTop = 0
            }
         }
      }
   })
</script>